<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

  <title>兑换奖品</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.min.css">
  <style>
	.get-prize{
		margin:.75rem; 
		padding: .75rem; 
		border:1px solid #e5e5e5; 
		position: absolute; 
		height : 81%; 
		left : 0; 
		right : 0;
	}
	.get-prize-con{
		padding: .5rem;
		background : #eeeeee;
		display: flex;
	}
    .get-prize-con .pic{ 
    	margin-right : .5rem; 
    	width : 3rem; 
    	height : 3rem;
    }
	  .info{
		  margin-top : .5rem;
	  }
	  .info input{
		  width : 90%; 
		  font-size : .7rem; 
		  color: #666; 
		  line-height : 2; 
		  margin-top : .5rem;
		  border-bottom: 1px solid #e5e5e5; 
		  display: block;
	  }
	  .get-prize-footer{
	  	position: fixed; 
	  	bottom : 0; 
	  	width : 100%; 
	  	color : #ffffff; 
	  	height : 2.5rem; 
	  	line-height : 2.5rem; 
	  	background : #e53131;
	  }

  </style>
</head>
<body>
	<div id="userInfo">
		<div class="get-prize">
			<div class="get-prize-con">
				<div class="pic"><img :src="prizeData.img"></div>
				<div >
					<p class="fz16">{{prizeData.name}}</p>
					<p class="hui999 ">
						有效期 <br>{{prizeData.date}}
					</p>
				</div>
			</div>
			<div class="info">
				<input type="text" placeholder="收件人姓名" maxlength="16" autofocus v-model="name">
				<input type="tel" maxlength="11"  placeholder="收件人电话" v-model="tel">
				<input type="text" placeholder="收货地址" maxlength="40" v-model="addr">
			</div>
		</div>
		<button class="get-prize-footer fz18 text-center" @click="postInfo">
			确认兑换
		</button>
	</div>
	<script src="../common/lib/vue.min.js"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="../utils/http-service.js"></script>
	<script>
		const userInfo = new Vue({
			el:'#userInfo',
			mounted: function () {
				var that = this;
				var obj = JSON.parse(localStorage.getItem('exchange'));
				that.prizeData = obj;
				that.id = getQueryString('id');
				that.uid = getQueryString('uid');
				that.act_id = getQueryString('act_id');
				that.prize_id = getQueryString('prize_id');
			},
			data:{
			    name:'',
			    tel:'',
			    addr:'',
			    prizeData: {},
			    id: '',
			    uid: '',
			    act_id: '',
			    prize_id: ''
			},
			methods:{
                postInfo: function () {
                    if(!this.name){
                        Toast('请填写收件人姓名')
	                    return
			        }
			        if(!this.tel){
                        Toast('请填写收件人电话')
                        return
                    }
                    if(!this.addr){
                        Toast('请填写收获地址')
                        return
                    }

                    var data={};
                    data['id'] = this.id;
                    data['uid'] = this.uid;
                    data['name'] = this.name;
                    data['mobile'] = this.tel;
                    data['act_id'] = this.act_id;
                    data['prize_id'] = this.prize_id;
                    data['address'] = this.addr;
                    data = JSON.stringify(data);
                    $.ajax({
                    	url: host + '/lua/api/draw/exchange',
                    	type: 'POST',
                    	'Content-Type': 'application/json;charset=utf-8',
                    	data: data,
                    	success: function (res) {
                    		if (res.code == 200) {
                    			Toast('提交成功');
                    			setTimeout(function () {
                    				window.history.go(-1);
                    			},1000)
                    		} else {
                    			Toast(res.message)
                    		}
                    	}
                    })
                }
			}
		})
	</script>
</body>
</html>